<template>
  <div>
    <el-cascader
      style="width:100%"
      v-model="areaS"
      placeholder="选择城市"
      :options="cities"
      :prop="{'value':'code',label:'code'}"
      @change="handleChange"
      filterable clearable></el-cascader>
  </div>
</template>

<script>
  import options from "@/api/common/cities";

  export default {
    name: "index",
    props: {
      area:String
    },
    data() {
      return {
        cities: [],
        areaS: []
      }
    },
    watch: {

      area: function (val) {
        if(val!=null){
          this.areaS = val.split(",")
        }
      }

    },
    created() {
      //渲染城市数据
      this.cities = options;

      //回显
      if(this.area!=null){
        this.areaS = this.area.split(",")
      }
    },
    methods: {
      handleChange(value) {
          this.$emit('getArea', value.join())
      }
    }
  }
</script>

<style scoped>

</style>
